<!DOCTYPE html>
<!-- 声明 HTML 文档的语言为英语 -->
<html lang="en">

<head>
    <!-- 设置文档的字符编码为 UTF-8，确保能正确显示各种字符 -->
    <meta charset="UTF-8">
    <!-- 设置视口，让网页在不同设备上能正确显示，initial-scale=1.0 表示初始缩放比例为 100% -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页的标题，会显示在浏览器标签页上 -->
    <title>响应式网页底部波浪效果</title>
    <!-- 引入外部 CSS 文件，该文件定义了网页的样式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入 Font Awesome 字体图标库，用于显示各种图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
    <meta name="source" content="https://www.bilibili.com/video/BV1Q1daYoE6g?vd_source=c4185b82ffae089480e2f44bf718ea02">
    <meta name="author" content="大碗绿豆沙(B站)">
</head>

<body>
    <!-- 定义网页的页脚部分 -->
    <footer>
        <!-- 包含多个波浪元素的容器 -->
        <div class="waves">
            <!-- 第一个波浪元素，每个波浪元素有不同的样式和动画效果 -->
            <div class="wave" id="wave1"></div>
            <div class="wave" id="wave2"></div>
            <div class="wave" id="wave3"></div>
            <div class="wave" id="wave4"></div>
        </div>
        <!-- 社交图标列表 -->
        <ul class="social-icon">
            <!-- 检查并修改图标类名 -->
            <!-- 每个列表项代表一个社交图标，--clr 是自定义属性，用于设置图标颜色 -->
            <li style="--clr:#1877f2;"><a href="#"><i class="fa-brands fa-qq"></i></a></li>
            <li style="--clr:#05df05;"><a href="#"><i class="fa-brands fa-weixin"></i></a></li>
            <li style="--clr:#a33494;"><a href="#"><i class="fa-brands fa-bilibili"></i></a></li>
            <li style="--clr:#020c1a;"><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
        </ul>
        <!-- 页脚菜单列表 -->
        <ul class="menu">
            <!-- 每个列表项代表一个菜单项，点击后跳转到相应页面 -->
            <li><a href="#">首页</a></li>
            <li><a href="#">分类</a></li>
            <li><a href="#">官网</a></li>
            <li><a href="#">邮箱</a></li>
        </ul>
        <!-- 版权信息，显示在页脚底部 -->
        <p>©2025 哔哩哔哩 | TE</p>
    </footer>
</body>

</html>